<template>
	<contents :heightInclude="['tabBar']">
		<view class="point-index__topic u-relative u-margin-bottom-14">
			<u-image
				width="100%"
				height="340rpx"
				src="http://img.druglots.cn/point_bg.png"
			></u-image>
			<view class="text u-absolute">
				<view class="top">优惠专区</view>
				<view class="bottom u-font-22 u-margin-top-12">
					天天有惊喜 现金抵扣享不停
				</view>
			</view>
		</view>

		<view
			class="coupon-item__view u-margin-left-28 u-margin-right-28"
			v-for="data in dataList"
			:key="data.id"
		>
			<view class="left">
				<view class="left-wrap">
					<view class="count">
						<text class="number">{{ data.amountD }}</text>
					</view>

					<view class="type-view">
						<view class="type">
							<text class="text">立减券</text>
						</view>
					</view>
				</view>
			</view>

			<view class="before" style="background: #F3F3F6;" />
			<view class="after" style="background: #F3F3F6" />

			<view class="middle">
				<view class="header">{{ data.storeName }}</view>

				<view class="inner-wrap">
					<view class="inner-left">
						<view class="point-needed">
							需
							<text class="number">{{ data.integralCount }}</text>
							积分
						</view>

						<view class="endtime">
							<text>兑换截止：{{ data.endTime }}</text>
						</view>
					</view>

					<view class="inner-right">
						<view class="button" @click="handleClickButton(data)">
							兑换
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-modal
			v-model="isShowConfirmDialog"
			show-cancel-button
			@confirm="confirm"
			@cancel="cancel"
			:content="content"
		></u-modal>

		<u-modal
			v-model="isShowSuccessDialog"
			show-cancel-button
			:show-title="false"
			confirm-text="去查看"
			cancel-text="关闭"
			@confirm="confirmLook('/pages/user/cardbag/coupon')"
			@cancel="cancelLook"
		>
			<view class="slot-content">
				<view class="modal-padding">
					<view class="modal-icon">
						<u-image
							class="icon"
							width="72"
							height="72"
							src="http://img.druglots.cn/image/success.png"
						/>
					</view>
					<view class="content">兑换成功</view>
				</view>
			</view>
		</u-modal>

		<u-modal
			v-model="isShowFailDialog"
			:show-confirm-button="false"
			:show-title="false"
		>
			<view class="slot-content">
				<view class="modal-padding">
					<view class="modal-icon">
						<u-image
							class="icon"
							width="72"
							height="72"
							src="http://img.druglots.cn/image/fail.png"
						/>
					</view>
					<view class="content">{{ failMessage }}</view>
					<view class="content">{{ countdown }} 秒后返回上一页</view>
				</view>
			</view>
		</u-modal>
	</contents>
</template>

<script>
import {
	getPointCouponList,
	handleCouponExchangeAction
} from '@/api/http/point.js'
export default {
	components: {},
	data() {
		return {
			pageData: {
				pageNo: 1,
				pageSize: 10
			},
			total: 0,
			dataList: [],
			storedata: null,
			isShowConfirmDialog: false,
			content: '您将使用积分兑换，请确认！',
			isShowSuccessDialog: false,
			isShowFailDialog: false,
			failMessage: '',
			timer: null,
			countdown: 3
		}
	},
	created() {
		this.getPointCouponList()
	},
	methods: {
		// 获取积分劵
		async getPointCouponList() {
			const res = await getPointCouponList(this.pageData)

			if (res.code === 200) {
				this.dataList = [...this.dataList, ...res.data.records]
			} else {
				uni.showtoast({
					title: res.message,
					icon: 'none'
				})
			}
		},
		// 兑换
		handleClickButton(data) {
			this.storedata = data
			this.isShowConfirmDialog = true
		},
		confirm() {
			this.handleExchangeCouponAction()
		},
		cancel() {
			this.isShowConfirmDialog = false
		},
		async handleExchangeCouponAction() {
			const res = await handleCouponExchangeAction({
				storeId: this.storedata.storeId
			})

			if (res.code === 200) {
				this.isShowConfirmDialog = false
				this.isShowSuccessDialog = true
				this.isShowFailDialog = false
			} else {
				this.isShowConfirmDialog = false
				this.isShowSuccessDialog = false
				this.isShowFailDialog = true
				this.failMessage = res.message
				const timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown = this.countdown - 1
					} else {
						this.isShowSuccessDialog = false
						this.isShowFailDialog = false
					}
				}, 1000)
			}
		},
		// 去查看
		confirmLook(url) {
			uni.navigateTo({
				url
			})
		},
		// 关闭
		cancelLook() {
			this.isShowConfirmDialog = false
			this.isShowSuccessDialog = false
		}
	},
	Destroy() {
		clearInterval(this.timer)
	}
}
</script>

<style lang="scss" scoped>
.point-index__topic {
	width: 100%;

	.text {
		top: 50%;
		left: 52rpx;
		transform: translateY(-50%);

		.top {
			font-size: 64rpx;
			color: #ffc7bf;
		}

		.bottom {
			color: #fff;
			letter-spacing: 3rpx;
		}
	}
}

.coupon-item__view {
	display: flex;
	background: #fff;
	border: 1px solid #dcdcdc;
	border-radius: 20rpx;
	margin-bottom: 13rpx;
	box-sizing: border-box;
	position: relative;

	.before,
	.after {
		content: '';
		display: block;
		position: absolute;
		width: 32rpx;
		height: 32rpx;
		background: #f3f3f6;
		border-radius: 50%;
	}

	.before {
		left: 174rpx;
		top: -16rpx;
	}

	.after {
		left: 174rpx;
		top: calc(100% - 16rpx);
	}

	.left {
		width: 190rpx;
		padding: 31rpx 0;
		flex-shrink: 0;

		.left-wrap {
			padding: 31rpx 0;
			border-right: 2rpx dashed #ea662c;

			.count {
				text-align: center;
				color: #ff3c2c;
				font-weight: bolder;
				font-size: 54rpx;

				&::before {
					content: '¥';
					font-size: 20rpx;
					display: inline-block;
					margin-right: 10rpx;
				}
			}

			.type-view {
				text-align: center;

				.type {
					background: #fff6eb;
					color: #ff3828;
					font-size: 22rpx;
					border-radius: 25rpx;
					display: inline-block;
					padding: 6rpx 17rpx;
				}
			}
		}
	}

	.middle {
		padding: 49rpx 30rpx 38rpx;
		width: 100%;

		.header {
			font-size: 28rpx;
			line-height: 34rpx;
			color: #444444;
			letter-spacing: 5rpx;
			margin-bottom: 29rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 90%;
		}

		.inner-wrap {
			display: flex;
			justify-content: space-between;
		}

		.inner-right {
			.button {
				background: linear-gradient(to bottom, #f73b22, #fd6e5b);
				color: #fff;
				border-radius: 50rpx;
				width: 114rpx;
				height: 52rpx;
				text-align: center;
				line-height: 52rpx;
				font-size: 24rpx;
				font-weight: 500;
			}
		}

		.inner-left {
			.point-needed {
				color: #555555;
				font-size: 26rpx;
				line-height: 32rpx;
				margin-bottom: 15rpx;

				.number {
					color: #ff3828;
				}
			}

			.endtime {
				color: #707070;
				font-size: 22rpx;
			}
		}
	}

	.right {
		padding-bottom: 48rpx;
		flex-shrink: 0;
		align-self: flex-end;
	}
}

.modal-padding {
	padding-top: 48rpx;
	height: 300rpx;

	.modal-icon {
		text-align: center;
		margin-bottom: 31rpx;

		.icon {
			display: inline-block;
		}
	}

	.content {
		color: #000000;
		font-size: 34rpx;
		text-align: center;
	}
}
</style>
